{% load static %}
<html lang="en">
<title>登录</title>
<div>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Jhenghei", sans-serif;
        }

        .logo path {
            pointer-events: none;
            fill: none;
            stroke-linecap: round;
            stroke-width: 7;
            stroke: rgb(255, 255, 255);
        }

        .wechat-group img {
            max-width: 220px;
            height: auto;
            border-radius: 8px;
            margin: 0 auto;
            width: 100%;
        }

        .welcome-img img {
            width: 100%;
        }

        .c1821 {
            display: none;
        }

        .c1837 {
            height: 100vh;
            padding-top: 60px;
        }

        {#.c1812 {#}
        {#        芝士背景色？#}
        {#    background: #00aced;#}

        .custom-btn {
        {# 按钮 #} border: none; /* 隐藏边框 */
            color: blue; /* 蓝色文字 */
            font-size: 20px; /* 放大字号 */
            font-family: Arial, sans-serif; /* 更改字体 */
            text-align: center; /* 居中文本 */
            padding: 10px 20px; /* 内边距 */
            display: inline-block; /* 使按钮在同一行显示 */
            width: 150px; /* 设置按钮宽度 */
            height: 50px; /* 设置按钮高度 */
            background-color: #f1f1f1; /* 设置背景颜色 */
            border-radius: 5px; /* 设置圆角 */
            display: block; /* 将按钮设置为块级元素 */
            margin: auto; /* 将按钮居中 */
        }

        #i3iii {
        {# 背景 #} background-image: url('{% static "img/background.jpg" %}');
            background-size: cover; /* 这会使背景图片覆盖整个元素 */
            opacity: 0.8; /* 设置透明度为50% */
            z-index: -1; /* 将背景图片置于最底层 */
        }

        .rounded {
        {# 输入框变成圆角 #} border-radius: 5px; /* 你可以根据需要调整这个值 */
        }

        .form-group {
            background-color: rgba(255, 255, 255, 0.6); /* 半透明白色背景 */
            border: 1px solid rgba(255, 255, 255, 0.6); /* 半透明白色边框 */
        {% comment %}            display: flex; /* 使用flexbox布局 */
                    justify-content: flex-end; /* 将子元素对齐到右侧 */
                    align-items: center; /* 在垂直方向上居中对齐子元素 */{% endcomment %}
        }

        .main-content {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置容器的高度为视口的100% */
        }

        }
    </style>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <title>用户登录</title>
    <link href="{% static 'css/page.min.css' %}" rel="stylesheet" type="text/css"/>
    <link href="{% static "css/style.css" %}" rel="stylesheet" type="text/css"/>
    <link rel="apple-touch-icon" href={% static "img/apple-touch-icon.png" %}/>
    <link rel="icon" href={% static "img/favicon.png" %}/>
    <div id="i3iii" class="bg-main-img c1812"><img src="{% static 'img/4.jpg' %}" class="c1821" alt=""/>
        <!-- Main Content -->
        <main id="inc0h" title="管理员登录" class="main-content c1837">
            <div class="bg-white rounded shadow-7 w-400 mw-100 p-6 mx-auto">
                <h5 class="mb-7">管理员登录
                    <span style="font-size: x-large">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <a href="/">首页</a></h5>
                <form method="post" action="/admin/login/">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" name="user" placeholder="用户名" class="form-control"/>

                    </div>
                    <div class="form-group">
                        <input type="password" name="pwd" placeholder="密码"
                               class="form-control"/>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-block btn-primary">登录</button>
                    </div>
                </form>
                <hr class="w-30"/>
                <span style="color: #85262c">{{ err_msg }}</span>
            </div>
        </main><!-- /.main-content -->
    </div><!-- Scripts -->
    <script src={% static "js/jquery.min.js" %}></script>
    <script src={% static "js/script.js" %}></script>
</div>

</html>